"use client";

/**
 * /w/:workspace/settings/automations — the AUTOMATION LIST.
 *
 * A table of the workspace's automations (name, status, trigger types, latest
 * run status) with a "New automation" button and per-row controls: an
 * enable/pause switch (ACTIVE ↔ PAUSED, via POST /automations/:id/status) and
 * a delete (DELETE /automations/:id → archives). Each row can expand its run
 * history (GET /automations/:id/runs).
 */
import { useState } from "react";
import { useParams, useRouter } from "next/navigation";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { History, Plus, Trash2 } from "lucide-react";
import { toast } from "@/stores/ui-store";
import { apiFetch } from "@/lib/api";
import { useWorkspace } from "@/hooks/use-workspace";
import { SettingsShell, Section } from "@/components/settings/settings-shell";
import { statusCls, runStatusLabel, type AutomationSummary } from "@/components/automations/lib";
import { RunHistory } from "@/components/automations/run-history";

export default function AutomationsListPage() {
  const params = useParams<{ workspace: string }>();
  const slugOrId = params?.workspace ?? "";
  const router = useRouter();
  const { data: ws, isLoading } = useWorkspace(slugOrId);
  const wid = ws?.id ?? "";

  return (
    <SettingsShell
      title="Automations"
      description="Automate record, page, form and schedule events."
      active="automations"
    >
      {isLoading || !ws ? (
        <p className="text-sm text-muted-foreground">Loading…</p>
      ) : (
        <AutomationsTable workspaceSlug={slugOrId} workspaceId={wid} onNew={() => router.push(`/w/${slugOrId}/settings/automations/new`)} />
      )}
    </SettingsShell>
  );
}

function AutomationsTable({ workspaceSlug, workspaceId, onNew }: { workspaceSlug: string; workspaceId: string; onNew: () => void }) {
  const qc = useQueryClient();
  const [cursor, setCursor] = useState<string | null>(null);
  const [expanded, setExpanded] = useState<string | null>(null);

  const list = useQuery({
    queryKey: ["workspaces", workspaceId, "automations", cursor ?? "first"],
    queryFn: async (): Promise<{ data: AutomationSummary[]; nextCursor: string | null }> => {
      const res = await apiFetch<{ data: AutomationSummary[]; nextCursor: string | null }>(
        `/workspaces/${workspaceId}/automations?limit=50${cursor ? `&cursor=${encodeURIComponent(cursor)}` : ""}`
      );
      return res;
    },
    enabled: !!workspaceId
  });

  const rows = list.data?.data ?? [];
  const nextCursor = list.data?.nextCursor ?? null;

  const setStatus = useMutation({
    mutationFn: (input: { id: string; status: string }) =>
      apiFetch(`/automations/${input.id}/status`, { method: "POST", body: { status: input.status } }),
    onSuccess: () => qc.invalidateQueries({ queryKey: ["workspaces", workspaceId, "automations"] }),
    onError: (err) => toast("error", "Status change failed", err instanceof Error ? err.message : undefined)
  });

  const remove = useMutation({
    mutationFn: (id: string) => apiFetch(`/automations/${id}`, { method: "DELETE" }),
    onSuccess: () => {
      qc.invalidateQueries({ queryKey: ["workspaces", workspaceId, "automations"] });
    },
    onError: (err) => toast("error", "Delete failed", err instanceof Error ? err.message : undefined)
  });

  return (
    <Section title="Automations" description="Trigger → condition → actions. Runs are recorded with per-step logs.">
      <div className="mb-3 flex items-center justify-between">
        <span className="text-xs text-muted-foreground">{rows.length} automation{rows.length === 1 ? "" : "s"}</span>
        <button
          type="button"
          data-testid="automation-new"
          className="inline-flex items-center gap-1 rounded-md bg-primary px-2.5 py-1.5 text-sm font-medium text-white hover:opacity-90"
          onClick={onNew}
        >
          <Plus className="size-4" /> New automation
        </button>
      </div>

      {list.isLoading ? (
        <p className="text-sm text-muted-foreground">Loading…</p>
      ) : (
        <div className="overflow-x-auto">
          <table className="w-full border-collapse text-sm" data-testid="automation-list">
            <thead>
              <tr className="border-b border-border text-left text-xs text-muted-foreground">
                <th className="px-2 py-1.5 font-medium">Name</th>
                <th className="px-2 py-1.5 font-medium">Status</th>
                <th className="px-2 py-1.5 font-medium">Triggers</th>
                <th className="px-2 py-1.5 font-medium">Latest run</th>
                <th className="px-2 py-1.5" />
              </tr>
            </thead>
            <tbody>
              {rows.length === 0 && (
                <tr>
                  <td colSpan={5} className="px-2 py-6 text-center text-sm text-muted-foreground">
                    No automations yet. Create one to start automating.
                  </td>
                </tr>
              )}
              {rows.map((a) => (
                <AutomationRow
                  key={a.id}
                  a={a}
                  workspaceSlug={workspaceSlug}
                  expanded={expanded === a.id}
                  onToggleExpand={() => setExpanded(expanded === a.id ? null : a.id)}
                  onStatus={(status) => setStatus.mutate({ id: a.id, status })}
                  onRemove={() => {
                    if (window.confirm(`Delete “${a.name}”? This archives it (runs are kept).`)) remove.mutate(a.id);
                  }}
                  busy={setStatus.isPending}
                />
              ))}
            </tbody>
          </table>
        </div>
      )}

      {nextCursor && (
        <button
          type="button"
          className="mt-3 text-xs text-muted-foreground hover:text-foreground"
          onClick={() => setCursor(nextCursor)}
        >
          Load more…
        </button>
      )}
    </Section>
  );
}

function AutomationRow({
  a,
  workspaceSlug,
  expanded,
  onToggleExpand,
  onStatus,
  onRemove,
  busy
}: {
  a: AutomationSummary;
  workspaceSlug: string;
  expanded: boolean;
  onToggleExpand: () => void;
  onStatus: (status: string) => void;
  onRemove: () => void;
  busy: boolean;
}) {
  const router = useRouter();
  const active = a.status === "ACTIVE";

  return (
    <>
      <tr data-testid={`automation-row-${a.id}`} className="border-b border-border/60 hover:bg-muted/30">
        <td className="max-w-52 px-2 py-2">
          <button
            type="button"
            className="block truncate text-left font-medium hover:underline"
            onClick={() => router.push(`/w/${workspaceSlug}/settings/automations/${a.id}`)}
            title={a.name}
          >
            {a.name}
          </button>
          {a.description ? <span className="mt-0.5 block truncate text-xs text-muted-foreground">{a.description}</span> : null}
        </td>
        <td className="px-2 py-2">
          <span className={`inline-block rounded-full px-2 py-0.5 text-[11px] font-medium ${statusCls(a.status)}`}>{a.status}</span>
        </td>
        <td className="px-2 py-2">
          <span className="block max-w-40 truncate text-xs text-muted-foreground" title={a.triggers.join(", ")}>
            {a.triggers.length > 0 ? a.triggers.join(", ") : "—"}
          </span>
        </td>
        <td className="px-2 py-2">
          {a.latestRun ? (
            <span className="text-xs text-muted-foreground">{runStatusLabel(a.latestRun.status)}</span>
          ) : (
            <span className="text-xs text-muted-foreground/60">never</span>
          )}
        </td>
        <td className="px-2 py-2">
          <div className="flex items-center justify-end gap-2">
            <button
              type="button"
              data-testid={`automation-toggle-${a.id}`}
              role="switch"
              aria-checked={active}
              aria-label={`Enable / pause ${a.name}`}
              onClick={() => onStatus(active ? "PAUSED" : "ACTIVE")}
              disabled={busy}
              className={`relative inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full transition ${
                active ? "bg-primary" : "bg-muted"
              } ${busy ? "opacity-50" : ""}`}
            >
              <span
                className={`inline-block h-4 w-4 transform rounded-full bg-white transition ${active ? "translate-x-4" : "translate-x-0.5"}`}
              />
            </button>
            <button
              type="button"
              data-testid={`automation-runs-${a.id}`}
              className="inline-flex items-center gap-1 rounded-md border px-2 py-1 text-xs text-muted-foreground hover:text-foreground"
              onClick={onToggleExpand}
              aria-expanded={expanded}
            >
              <History className="size-3.5" /> Runs
            </button>
            <button
              type="button"
              className="rounded-md p-1 text-muted-foreground hover:bg-destructive/10 hover:text-destructive"
              onClick={onRemove}
              aria-label={`Delete ${a.name}`}
            >
              <Trash2 className="size-4" />
            </button>
          </div>
        </td>
      </tr>
      {expanded && (
        <tr className="border-b border-border/60 bg-muted/20">
          <td colSpan={5} className="px-2 py-2">
            <RunHistory automationId={a.id} compact />
          </td>
        </tr>
      )}
    </>
  );
}